const tbody = document.querySelector('tbody');
const addform = document.querySelector('#addModal form');
const updateForm = document.querySelector('#updateModal form');

function getStudentList() {
    axios.get('/student/list').then(result => {
        if (result.data.code === 0) {
            const arr = result.data.data;
            let html = arr.reduce((h, v) => h +
                `
            <tr>
                <th scope="row">${v.id}</th>
                <td>${v.name}</td>
                <td>${v.age}</td>
                <td>${v.sex}</td>
                <td>${v.group}</td>
                <td>${v.phone}</td>
                <td>${v.salary}</td>
                <td>${v.truesalary}</td>
                <td>${v.province+v.city+v.county}</td>
                <td>
                    <button type="button" data-id="${v.id}" class="btn btn-primary btn-sm update-modal-show" >修改</button>
                    <button type="button" data-id="${v.id}" class="btn btn-danger btn-sm deleteBtn">删除</button>
                </td>
            </tr>
            `, '')
            tbody.innerHTML = html;
        }
    })
}
getStudentList();
//初始化下拉列表函数
function initSelect(selector) {
    //发送请求-获取数据渲染下拉框
    const provinceSelect = document.querySelector(`${selector} [name=province]`);
    const citySelect = document.querySelector(`${selector} [name=city]`);
    const countySelect = document.querySelector(`${selector} [name=county]`);
    // 省下拉列表动态渲染
    renderSelect('/geo/province', {}, provinceSelect, '省');

    //新增表单 省change事件
    provinceSelect.addEventListener('change', function(e) {

            //发送请求-获取数据渲染市下拉框
            // const pname = provinceSelect.value;
            renderSelect('/geo/city', { pname: provinceSelect.value }, citySelect, '市');

        })
        //新增表单 给市绑定change事件
    citySelect.addEventListener('change', function(e) {
        // const params = {
        //         pname: provinceSelect.value,
        //         cname: citySelect.value
        //     }
        // 渲染县下拉列表
        renderSelect('/geo/county', { pname: provinceSelect.value, cname: citySelect.value }, countySelect, '县');
    })
}

// 封装一个动态渲染下拉列表的函数
function renderSelect(url, params, dom, lable, value = '') {
    axios.get(url, { params }).then(result => {
        dom.innerHTML = result.data.reduce((h, v) => h +
            `
        <option  value="${v}">${v}</option>
        `, `<option value="">--${lable}--</option>`)
        dom.value = value;
    })
}

//初始化新增表单下拉列表
initSelect('#addModal');
// 初始化编辑表单下拉列表
initSelect('#updateModal');
// 给新增表单  绑定 提交事件
// 1 阻止默认行为
// 2 快速获取新增表单中的值
// 3 拼接成参数发送给后端 完成新增
// 4 成功 
//   1 提示用户 新增成功
//   2 重置新增表单
//   3 关闭模态框
//   4 发送请求获取最新的数据 

addform.addEventListener('submit', function(e) {
    e.preventDefault();
    const data = $(addform).serialize();
    axios.post('/student/add', data).then(result => {
        if (result.data.code === 0) {
            toastr.success(result.data.message);
            addform.reset();
            $('#addModal').modal('hide');
            getStudentList();
        }
    })
})

updateForm.addEventListener('submit', function(e) {
    e.preventDefault();
    const data = $(updateForm).serialize();
    axios.put('/student/update', data).then(result => {
        if (result.data.code === 0) {
            toastr.success(result.data.message);
            updateForm.reset();
            $('#updateModal').modal('hide');
            getStudentList();
        }
    })
})

tbody.addEventListener('click', function(e) {
    if (e.target.classList.contains('update-modal-show')) {
        $('#updateModal').modal('show');
        const id = e.target.dataset.id;
        axios.get('/student/one', { params: { id } }).then(result => {
            const obj = result.data.data;
            for (const key in obj) {
                const target = document.querySelector(`#updateModal [name=${key}]`);
                if (key === 'sex') {
                    document.querySelector(`#updateModal [name='sex'][value=${obj.sex}]`).checked = true;
                    continue;
                }
                if (target) {
                    target.value = obj[key];
                }
            }
            renderSelect('/geo/city', { pname: obj.province },
                document.querySelector('#updateModal [name=city]'),
                '市',
                obj.city);

            renderSelect('/geo/county', { pname: obj.province, cname: obj.city },
                document.querySelector('#updateModal [name=county]'),
                '市',
                obj.county);
        })
    } else if (e.target.classList.contains('deleteBtn')) {
        const id = e.target.dataset.id;
        axios.delete('/student/delete', { params: { id } }).then(result => {
            if (result.data.code === 0) {
                toastr.success(result.data.message);
                getStudentList();
            }
        })
    }
})